<template>
  <div style="width: 50%">
    <div class="card" style="padding: 30px">
      <el-form :model="user" label-width="100px" style="padding-right: 50px">
        <el-form-item label="原密码">
          <el-input v-model="user.password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="user.newPassword" show-password />
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="user.confirmPasword" show-password />
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" v-on:click="save">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('system-user') || '{}'),
    };
  },
  methods: {
    save() {
      if (this.user.newPassword !== this.user.confirmPasword) {
        this.$message.error('确认新密码错误');
        return;
      }
      request.put('/updatePassword', this.user).then(res => {
        if (res.code === '200') {
          this.$message.success('修改密码成功');
          // 清空缓存
          localStorage.removeItem('system-user');
          router.push('/login');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>